<template>
  <el-form ref="userInfoForm" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickname">
      <el-input v-model="form.nickname" maxlength="30"/>
    </el-form-item>
<!--    <el-form-item label="用户名称" prop="username">-->
<!--      <el-input v-model="form.username" maxlength="30"/>-->
<!--    </el-form-item>-->
    <!--    <el-form-item label="手机号码" prop="phonenumber">-->
    <!--      <el-input v-model="form.phonenumber" maxlength="11"/>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="邮箱" prop="email">-->
    <!--      <el-input v-model="form.email" maxlength="50"/>-->
    <!--    </el-form-item>-->
    <!--    <el-form-item label="性别">-->
    <!--      <el-radio-group v-model="form.sex">-->
    <!--        <el-radio label="0">男</el-radio>-->
    <!--        <el-radio label="1">女</el-radio>-->
    <!--      </el-radio-group>-->
    <!--    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" size="small" @click="submit">保存</el-button>
<!--      <el-button type="danger" size="small" @click="close">关闭</el-button>-->
    </el-form-item>
  </el-form>
</template>

<script setup lang="js">
import UserAPI from "@/api/user";
import {defineProps} from 'vue'
const props = defineProps(["user"])

const form = ref()
// 表单校验
const rules = reactive({
  nickName: [
    {required: true, message: "用户昵称不能为空", trigger: "blur"}
  ],
})
watch(
  props,
  (n, o) => {
    console.log("user", n)
    if (props.user) {
      form.value = props.user;
      console.log("form", form.value)
    }
  },
  {immediate: true, deep: true}
)

const userInfoForm = ref(ElForm);

function submit() {
  userInfoForm.value.validate(valid => {
    if (valid) {
      UserAPI.updateUserProfile(form.value).then(response => {
        ElMessage.success("修改成功");
      });
    }
  });
}

function close() {
  this.$tab.closePage();
}

</script>
